<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>fixed布局与absolute布局</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			
			p {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<p style="color: goldenrod;position: fixed;top: 5px;margin-top: 20px;">fixed布局,fixed的定位上下文永远是浏览器,也是脱离文档流</p>
		<p style="color: aquamarine;">这又是一个测试2</p>
		<div style="height: 100px;background-color:aquamarine;">

		</div>
		<p style="position: absolute;">说了定位上下位，不得不说absolute，他非常奇怪，比如这个，在原来的位置动也不动</p>
		<div style="position: absolute;width: 150px;height: 150px;background-color: darkcyan;">
			<p style="position: absolute;">两个相邻的绝对定位会重叠的，根据z-index设置</p>
		</div>
		<div style="position: absolute;background: red;height: 100px;width: 100px;right: 10px;top: 10px;">这又是个绝对的div 指定了top left 他就飞走了</div>

		<div style="position: relative;width: 400px;height: 200px;top: 200px;background-color: chocolate;">
			<p style="position: absolute;top: 40px;left: 10px;">这踏马继续测试呼呼,天使被圈住了，飞不动了，应为它的父元素有个是relative/fixed/absolute。而且使劲往上找直到找到一个是上述定位的</p>
		</div>
		
	</body>

</html>